import React, {useEffect, useState} from 'react';
import {Animated, Easing} from 'react-native';

const avatar = ({uri}) => {
  const [rotate] = useState(new Animated.Value(0));
  useEffect(() => {
    function move() {
      Animated.timing(rotate, {
        toValue: 1,
        duration: 1000,
        easing: Easing.linear,
        useNativeDriver: true,
      }).start(() => {
        rotate.setValue(0);
        move();
      });
    }
    move();
  }, []);
  return (
    <Animated.Image
      source={{
        uri,
      }}
      style={{
        width: 50,
        height: 50,
        borderRadius: 25,
        borderWidth: 10,
        borderColor: '#000',
        padding: 10,
        transform: [
          {
            rotate: rotate.interpolate({
              inputRange: [0, 1],
              outputRange: ['0deg', '360deg'],
            }),
          },
        ],
      }}
    />
  );
};

export default avatar;
